<template>
  <h2>Child组件-{{ firstName + secodName + lastName }}</h2>
  <div class="list">
    <ul class="star">
      <li>刘德华</li>
      <li>黎明</li>
      <li>郭富城</li>
      <li>张学友</li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue";
const firstName = ref("周");
const secodName = ref("志");
const lastName = ref("超");
const setUserName = () => {
  firstName.value = "🐎";
  secodName.value = "";
  lastName.value = "超";
};
// 需要暴露某些属性，外部才可以通过ref引用获取
defineExpose({ firstName, secodName, lastName, setUserName });
</script>

<style  lang="scss" scoped>
// 定义变量
$color: skyblue;
h2 {
  color: $color;
}
// 嵌套写法
.list {
  border: 2px solid skyblue;
  .star {
    list-style-type: none;
    li {
      border-bottom: 2px solid green;
      //  &:引用父选择器
      &:hover {
        font-size: 20px;
        color: $color;
      }
    }
  }
}
</style>